<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>xbren的博客</title>
    <!-- 引入Element Plus样式 -->
    <link rel="stylesheet" href="./css/elemnt-plus.min.css">
    <link rel="stylesheet" href="./css/home-page.css">
</head>
<body>
    <div id="app">
        <el-container class="layout-container">
            <!-- Header -->
            <el-header class="header">
                <div class="header-content">
                    <div class="left">
                        <el-avatar v-bind:src="userInfo.avatar"></el-avatar>{{userInfo.name}}的博客
                    </div>
                    <el-menu mode="horizontal" :ellipsis="false" class="nav-links">
                        <el-menu-item index="1">首页</el-menu-item>
                        <el-menu-item index="2">分类</el-menu-item>
                        <el-menu-item index="3">归档</el-menu-item>
                        <el-menu-item index="4">关于</el-menu-item>
                    </el-menu>
                </div>
            </el-header>

            <el-container class="main-container">
                <!-- Sidebar -->
                <el-aside :class="['sidebar', isCollapse ? 'collapsed' : '']">
                    <el-menu :collapse="isCollapse" class="sidebar-menu">
                        <el-sub-menu index="1">
                            <template #title>
                                <el-icon><i class="el-icon-house"></i></el-icon>
                                <span>导航</span>
                            </template>
                            <el-menu-item index="1-1">首页</el-menu-item>
                            <el-menu-item index="1-2">分类</el-menu-item>
                            <el-menu-item index="1-3">归档</el-menu-item>
                            <el-menu-item index="1-4">关于</el-menu-item>
                        </el-sub-menu>

                        <el-sub-menu index="2">
                            <template #title>
                                <el-icon><i class="el-icon-collection"></i></el-icon>
                                <span>分类</span>
                            </template>
                            <el-menu-item index="2-1">技术 (10)</el-menu-item>
                            <el-menu-item index="2-2">生活 (5)</el-menu-item>
                            <el-menu-item index="2-3">读书 (3)</el-menu-item>
                            <el-menu-item index="2-4">旅行 (2)</el-menu-item>
                        </el-sub-menu>

                        <el-sub-menu index="3">
                            <template #title>
                                <el-icon><i class="el-icon-document"></i></el-icon>
                                <span>最新文章</span>
                            </template>
                            <el-menu-item index="3-1">这是一篇博客文章的标题</el-menu-item>
                            <el-menu-item index="3-2">另一篇有趣的博客文章</el-menu-item>
                            <el-menu-item index="3-3">第三篇精彩的文章</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>

                <!-- Main Content -->
                <el-main :class="['main-content', isCollapse ? 'collapsed' : '']">
                    <div class="content-container">
                        <div class="article-card" v-for="article in articles" :key="article.id">
                            <div class="article-header">
                                <h2 class="article-title">{{ article.title }}</h2>
                                <div class="article-meta">
                                    发布于 {{ article.date }} | 分类：{{ article.category }}
                                </div>
                            </div>
                            <div class="article-content">
                                <img v-if="article.image" :src="article.image" class="article-image">
                                <p class="article-summary">{{ article.summary }}</p>
                            </div>
                            <div class="article-footer">
                                <el-button type="primary" link>阅读更多...</el-button>
                            </div>
                        </div>
                    </div>
                </el-main>
            </el-container>

            <!-- Footer -->
            <el-footer :class="['footer', isCollapse ? 'collapsed' : '']">
                © 2024 {{userInfo.name}}的博客. All rights reserved.
            </el-footer>
        </el-container>
    </div>

    <!-- 引入Vue3 -->
    <script src="./js/vue.min.js"></script>
    <!-- 引入Element Plus -->
    <script src="./js/element-plus.min.js"></script>
    <script src="./js/home-page.js"></script>

</body>
</html>